<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回列表</el-button>
      </div>
      
      <div v-loading="loading">
        <div class="question-content" v-html="question.content"></div>
        
        <!-- 选项（单选题和多选题） -->
        <div v-if="question.type === 1 || question.type === 2" class="question-options">
          <div v-for="(option, index) in options" :key="index" class="option-item">
            <span class="option-key">{{ option.key }}.</span>
            <span class="option-content" v-html="option.content"></span>
          </div>
        </div>
        
        <el-divider></el-divider>
        
        <div class="question-info">
          <div class="info-row">
            <div class="info-item">
              <span class="label">题目类型：</span>
              <span>{{ question.typeName }}</span>
            </div>
            <div class="info-item">
              <span class="label">难度：</span>
              <el-tag :type="getDifficultyType(question.difficulty)">{{ question.difficultyName }}</el-tag>
            </div>
          </div>
          
          <div class="info-row">
            <div class="info-item">
              <span class="label">学科：</span>
              <span>{{ question.subjectName }}</span>
            </div>
            <div class="info-item">
              <span class="label">教育阶段：</span>
              <span>{{ question.educationLevelName }}</span>
            </div>
          </div>
          
          <div class="info-row">
            <div class="info-item">
              <span class="label">创建人：</span>
              <span>{{ question.creatorName }}</span>
            </div>
            <div class="info-item">
              <span class="label">创建时间：</span>
              <span>{{ formatDateTime(question.createTime) }}</span>
            </div>
          </div>
        </div>
        
        <el-divider></el-divider>
        
        <div class="answer-section">
          <h3>答案与解析</h3>
          
          <!-- 单选题答案 -->
          <div v-if="question.type === 1" class="answer-content">
            <div class="answer-label">正确答案：</div>
            <div class="answer-text">{{ getSelectedOptionContent(question.answer) }}</div>
          </div>
          
          <!-- 多选题答案 -->
          <div v-if="question.type === 2" class="answer-content">
            <div class="answer-label">正确答案：</div>
            <div class="answer-text">{{ getMultiSelectedOptionContent(question.answer) }}</div>
          </div>
          
          <!-- 判断题答案 -->
          <div v-if="question.type === 3" class="answer-content">
            <div class="answer-label">正确答案：</div>
            <div class="answer-text">{{ question.answer === 'true' ? '正确' : '错误' }}</div>
          </div>
          
          <!-- 填空题答案 -->
          <div v-if="question.type === 4" class="answer-content">
            <div class="answer-label">正确答案：</div>
            <div v-for="(blank, index) in blanks" :key="index" class="blank-answer">
              <span class="blank-index">空{{ index + 1 }}：</span>
              <span class="blank-text">{{ blank }}</span>
            </div>
          </div>
          
          <!-- 简答题答案 -->
          <div v-if="question.type === 5" class="answer-content">
            <div class="answer-label">参考答案：</div>
            <div class="answer-text" v-html="question.answer"></div>
          </div>
          
          <!-- 解析 -->
          <div v-if="question.analysis" class="analysis-content">
            <div class="answer-label">答案解析：</div>
            <div class="answer-text" v-html="question.analysis"></div>
          </div>
        </div>
        
        <div class="action-area">
          <el-button type="primary" @click="handleEdit">编辑试题</el-button>
          <el-button type="danger" @click="handleDelete">删除试题</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getQuestionDetail, deleteQuestion } from '@/api/question';

export default {
  name: 'QuestionDetail',
  data() {
    return {
      loading: false,
      question: {
        id: null,
        content: '',
        options: '',
        answer: '',
        analysis: '',
        type: null,
        typeName: '',
        difficulty: null,
        difficultyName: '',
        subjectId: null,
        subjectName: '',
        educationLevel: null,
        educationLevelName: '',
        creatorId: null,
        creatorName: '',
        createTime: null
      },
      options: [],
      blanks: []
    };
  },
  created() {
    this.getQuestionDetail();
  },
  methods: {
    // 获取试题详情
    getQuestionDetail() {
      this.loading = true;
      const questionId = this.$route.params.id;
      if (!questionId) {
        this.$message.error('试题ID不能为空');
        this.$router.push('/questions');
        return;
      }
      
      getQuestionDetail(questionId).then(response => {
        this.question = response.data;
        
        // 处理不同类型的题目
        if (this.question.type === 1 || this.question.type === 2) {
          // 处理选项
          if (this.question.options) {
            try {
              this.options = JSON.parse(this.question.options);
            } catch (e) {
              console.error('解析选项失败', e);
              this.options = [];
            }
          }
        } else if (this.question.type === 4) {
          // 处理填空题
          try {
            this.blanks = JSON.parse(this.question.answer);
          } catch (e) {
            this.blanks = [this.question.answer];
          }
        }
        
        this.loading = false;
      }).catch(() => {
        this.loading = false;
        this.$message.error('获取试题详情失败');
        this.$router.push('/questions');
      });
    },
    // 编辑试题
    handleEdit() {
      this.$router.push(`/question/edit/${this.question.id}`);
    },
    // 删除试题
    handleDelete() {
      this.$confirm('确定要删除该试题吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteQuestion(this.question.id).then(() => {
          this.$message.success('删除成功');
          this.$router.push('/questions');
        }).catch(() => {
          this.$message.error('删除失败');
        });
      }).catch(() => {});
    },
    // 返回列表
    goBack() {
      this.$router.push('/questions');
    },
    // 获取难度标签类型
    getDifficultyType(difficulty) {
      switch (difficulty) {
        case 1: return 'success';
        case 2: return 'warning';
        case 3: return 'danger';
        default: return '';
      }
    },
    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return '';
      const date = new Date(dateTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 获取单选题选中选项的内容
    getSelectedOptionContent(key) {
      const option = this.options.find(o => o.key === key);
      return option ? `${key}. ${option.content}` : key;
    },
    // 获取多选题选中选项的内容
    getMultiSelectedOptionContent(keys) {
      if (!keys) return '';
      
      const selectedKeys = keys.split(',');
      return selectedKeys.map(key => {
        const option = this.options.find(o => o.key === key);
        return option ? `${key}. ${option.content}` : key;
      }).join('、');
    }
  }
};
</script>

<style scoped>
.question-content {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.question-options {
  margin-left: 20px;
}

.option-item {
  margin-bottom: 10px;
  display: flex;
}

.option-key {
  font-weight: bold;
  margin-right: 10px;
  min-width: 20px;
}

.question-info {
  margin: 20px 0;
}

.info-row {
  display: flex;
  margin-bottom: 15px;
}

.info-item {
  flex: 1;
  display: flex;
  align-items: center;
}

.label {
  font-weight: bold;
  color: #606266;
  margin-right: 10px;
}

.answer-section {
  margin: 20px 0;
}

.answer-content, .analysis-content {
  margin-bottom: 20px;
}

.answer-label {
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 10px;
}

.answer-text {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  line-height: 1.6;
}

.blank-answer {
  margin-bottom: 10px;
}

.blank-index {
  font-weight: bold;
  margin-right: 10px;
}

.action-area {
  margin-top: 30px;
  text-align: center;
}
</style> 